<template>
  <a-modal :title="title" :width="1200" :visible="visible" :confirmLoading="confirmLoading" switchFullscreen @ok="handleOk" @cancel="handleCancel" cancelText="关闭">

    <a-spin :spinning="confirmLoading">
      <div class="split-data">
        <div class="base-info">
          <div class="depart-info">新媒体运营中心 采访部</div>
          <div class="performance-total">实发工资：{{model.salary}}</div>
        </div>
        <!-- 显示一条数据表，实时请求接口，不采用tab -->
        <div class="table-header">
          <a-radio-group v-model="dataType" style="margin-bottom: 16px" @change="onChangeType">
            <a-radio-button :value="0">
              绩效详情
            </a-radio-button>
            <a-radio-button :value="1">
              财务详情
            </a-radio-button>
          </a-radio-group>
          <div class="data-float">
            {{floatText}}
          </div>
        </div>
        <div>
          <a-table ref="table" size="middle" bordered rowKey="id" :columns="columns" :dataSource="dataSource" :pagination="ipagination" :loading="loading" :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}" @change="handleTableChange">

            <span slot="action" slot-scope="text, record">
              <a @click="handleAdjust(record)">调整</a>
            </span>

          </a-table>
        </div>
      </div>
    </a-spin>
  </a-modal>
</template>

<script>
import { JeecgListMixin } from '@/mixins/JeecgListMixin'

export default {
  name: 'PerformanceMonthAdd',
  mixins: [JeecgListMixin],
  data() {
    return {
      title: '月度绩效详情',
      visible: false,
      confirmLoading: false,
      dataType: 0,
      model: {},
      floatText: '',
      baseData: { depart: {} },
      url: {
        list: ''
      },
      typeUrls: ['/performance/performanceMonthTaskDetail/list', '/performance/performanceUserLog/list'],
      columns: [],
      typeColumns: [
        [
          {
            title: '任务ID',
            align: 'center',
            dataIndex: 'taskId'
          },
          {
            title: '任务名称',
            align: 'center',
            dataIndex: 'taskName'
          },
          {
            title: '时效绩效',
            align: 'center',
            dataIndex: 'timeScore'
          },
          {
            title: '传播绩效',
            align: 'center',
            dataIndex: 'spreadScore'
          },
          {
            title: '其他绩效',
            align: 'center',
            dataIndex: 'otherScore'
          },
          {
            title: '绩效总分',
            align: 'center',
            dataIndex: 'totalScore'
          }
        ],
        [
          {
            title: '序号',
            align: 'center',
            customRender: (text, record, index) => {
              return index + 1
            }
          },
          {
            title: '类型',
            align: 'center',
            dataIndex: 'logName'
          },
          {
            title: '调整金额',
            align: 'center',
            dataIndex: 'adjustAmount'
          },
          {
            title: '备注',
            align: 'center',
            dataIndex: 'remark'
          }
        ]
      ],
      disableMixinCreated: true
    }
  },
  methods: {
    edit(data) {
      this.model = data
      this.changeFloatText(this.dataType)
      this.url.list = this.typeUrls[this.dataType]
      this.columns = this.typeColumns[this.dataType]
      this.queryParam = {
        detailId: data.id
      }
      this.searchQuery()
      this.visible = true
    },
    close() {
      this.$emit('ok')
      this.visible = false
    },
    handleCancel() {
      this.close()
    },
    handleOk() {},
    onChangeType(e) {
      this.changeFloatText(e.target.value)
    },
    changeFloatText(type) {
      if (type == 0) {
        this.floatText = '绩效总分：' + this.model.totalScore
      } else {
        this.floatText = `绩效奖金 | 行政调整 | 部门调整：${this.model.scoreAmount} | ${this.model.adminAdjust} | ${
          this.model.departAdjust
        }`
      }
      this.url.list = this.typeUrls[this.dataType]
      this.columns = this.typeColumns[this.dataType]
      this.searchQuery()
    }
  }
}
</script>


<style lang="less" scoped>
@import '~@assets/less/common.less';

.split-data {
  padding: 20px 20px 0 0;

  .base-info {
    padding-bottom: 20px;

    .depart-info {
      padding: 0 0 20px;
      font-size: 15px;
      color: #000;
    }
  }

  .data-float {
    float: right;
  }
}
</style>

